<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set name="product" value="product"/>	
<s:action name="header" executeResult="true">
	<s:param name="titles">Chi Tiết - <s:property value="#product.title"/></s:param>
</s:action>
<s:action name="sidebar" executeResult="true" />

<!-- Center -->
<div id="center_column_des" class="center_column">
<!-- MODULE detail -->
<link media="screen" type="text/css" rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" />
<script src="js/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

	/* This is basic - uses default settings */
	
	$("a#image-block").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
                'easingIn' : 'swing',
                'easingOut' : 'swing',
		'speedIn'		:	300, 
		'speedOut'		:	300
	});
        
	/* Apply fancybox to multiple items */
	
	$("a.thickbox").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	300, 
		'speedOut'		:	300
	});
	
});
</script>
<!-- Breadcrumb -->
<div class="breadcrumb">
	<a href="<s:url action="index"></s:url>" title="Quay trở lại trang chủ">Trang chủ</a><span class="navigation-pipe">&gt;</span><span class="navigation_end"><s:property value="#product.title"/></span>
</div>
<!-- /Breadcrumb -->
	<div id="primary_block" class="clearfix">
		<h1><s:property value="#product.title"/></h1>
		<!-- right infos-->
		<div id="pb-right-column">
	        <!-- product img-->
	        <a id="image-block" href="<s:property value="#product.image_main"/>">
	            <img src="<s:property value="#product.image_main"/>" id="bigpic" width="290" onerror="this.src='images/noimage.jpg'" />
	        </a>
	        <!-- thumbnails -->
	        <div id="views_block">
	            <div id="thumbs_list">
	                <ul id="thumbs_list">
	                    <li style="display: list-item;" id="thumbnail_1">
	                        <a href="<s:property value="#product.image_1"/>" class="thickbox">
	                            <img rel="other-views" id="thumb_1" src="<s:property value="#product.image_1"/>" width="90" onerror="this.src='images/noimage.jpg'" />
	                        </a>
	                    </li>
	                    <li style="display: list-item;" id="thumbnail_2">
	                        <a href="<s:property value="#product.image_2"/>" class="thickbox">
	                            <img rel="other-views" id="thumb_2" src="<s:property value="#product.image_2"/>" width="90" onerror="this.src='images/noimage.jpg'" />
	                        </a>
	                    </li>
	                    <li style="display: list-item;" id="thumbnail_3">
	                        <a href="<s:property value="#product.image_3"/>" class="thickbox">
	                            <img rel="other-views" id="thumb_3" src="<s:property value="#product.image_3"/>" width="90" onerror="this.src='images/noimage.jpg'" />
	                        </a>
	                    </li>
	                </ul>
	            </div>
	        </div>
    	</div>
		<!-- left infos-->
		<div id="pb-left-column_o">
			<div id="short_description_block">
				<div id="short_description_content" class="rte align_justify">
					<s:property value="#product.description" escapeHtml="false"/>
				</div>
			</div>
			<!-- add to cart form-->
			<form id="buy_block" action="#" method="post">
				<!-- hidden datas -->
				
				<!-- prices -->
				<span class="on_sale">Price :&nbsp;&nbsp; <span id="our_price_display"><s:property value="#product.price" escapeHtml="false"/> VNĐ</span></span> 											
                
				<s:if test="%{#product.in_stock == 0}" >
                	<p><span class="on_sale">Hết Hàng ! </span> </p>
				</s:if>
				<s:else>
					<p id="quantity_wanted_p">
						<label>Số lượng :</label> <input type="text" name="qty" id="qty" onkeypress="return isNumberKey(event)" class="text" value="1" size="2" maxlength="3">
					</p>				
  					<p id="add_to_cart" class="buttons_bottom_block">
						<a class="exclusive" href="javascript:;" style="background-color: #FF5A00;" onclick="addToCart(<s:property value="#product.product_id" />)">Thêm vào giỏ hàng</a> 
					</p>  					
				</s:else>
				<div class="clearblock"></div>
			</form>
		</div>
	</div>
<script type="text/javascript">
function addToCart(productId){
	var qtyVal = $("#qty").val();
	if(qtyVal < 1){
		alert("Bạn phải nhập số lượng cần mua !");
	}else{
		ajaxCart.addcart(productId,qtyVal);
	}
	return false;
}
function isNumberKey(evt)
{
   var charCode = (evt.which) ? evt.which : event.keyCode
   if (charCode > 31 && (charCode < 48 || charCode > 57))
      return false;

   return true;
}
</script>	
	<!-- /MODULE detail -->		

</div>

<s:action name="footer" executeResult="true" />